<template>
  <div class="home">
    <h1>{{ msg }}</h1>
    <el-row>
      <el-col :span="6" :offset="8">
        <el-input v-model="url" aria-placeholder="请输入url"></el-input>
        <el-button type="primary" size="small" @click="addRouters">添加动态路由</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-table
            border
            width="100%"
            :data="routerList">
          <el-table-column
              label="路径"
              prop="path">
          </el-table-column>
          <el-table-column
              label="名称"
              prop="name">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div id="app">
      <nav>
        <router-link :to="router.path" :key="router.name" v-for="router in routerList">{{ router.name }} |</router-link>
      </nav>
      <router-view/>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: 'HomeView',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      count: 1,
      url: "",
    };
  },
  computed: {
    ...mapState(['routerList']),
  },
  created() {
  },
  methods: {
    addRouters() {
      let newRouter;
      if (!!this.url){
        //动态路由：展示链接
        newRouter = [
          {
            name: `${this.url}`,
            path: `/${this.url}`,
            component: () => import('@/components/iFrame/index.vue'),
            props: { src: this.url },
          }];
      }else {
        newRouter = [
          {
            name: `user${this.count}`,
            path: `/user${this.count}`,
            component: () => import('@/views/AboutView.vue'),
          }];
      }

      this.$store.dispatch('set_router', newRouter);
      console.log('动态路由添加完毕');
      this.count++;
    },
  },
};
</script>
